{% extends 'base.html' %}

{% block title %} Login {% endblock title %}

{% block hero %}{% endblock hero %}

{% block main %}
<div class="box is-radiusless is-marginless" style="height: 80%;">
    <div class="columns is-centered">
        <div class="column is-5-fullhd">
            {% block auth_form %}
            <form action="" method="post" style="margin-top: 40%;" class="box">
                <div class=" has-text-centered mb-3">
                    <p class=" subtitle">Login</p>
                    <h1 class="title">FFTD</h1>
                </div>
                {{ form.csrf_token }}
                <!-- 消息闪现 -->
                {% with messages = get_flashed_messages() %}
                <b-message type="is-danger">
                  {% if messages %}
                    <ul class=flashes>
                    {% for message in messages %}
                        <li>{{ message }}</li>
                    {% endfor %}
                    </ul>
                {% endif %}
                </b-message>
                {% endwith %}

                <!-- 表单验证 -->
                {% if form.username.errors %}
                <b-message type="is-danger">
                  <ul class="errors">
                    {% for error in form.username.errors %}
                    <li>{{ error }}</li>
                    {% endfor %}
                  </ul>
                </b-message>
                {% endif %}

                <div class="field">
                    <p class="control has-icons-left has-icons-right">
                      <!-- 用户名 -->
                      {{ form.username(class='input', placeholder='Username') }}
                      <span class="icon is-small is-left">
                        <i class="fas fa-envelope"></i>
                      </span>
                      <span class="icon is-small is-right">
                        <i class="fas fa-check"></i>
                      </span>
                    </p>
                  </div>
                  <div class="field">
                    <p class="control has-icons-left">
                      <!-- 密码 -->
                      {{ form.password(class='input', placeholder='Password') }}
                      <span class="icon is-small is-left">
                        <i class="fas fa-lock"></i>
                      </span>
                    </p>
                  </div>
                  <div class="field">
                    <p class="control">
                      <!-- 提交 -->
                      <input class="button is-success is-fullwidth" type="submit" value="Login">
                    </p>
                      <p class="control" style="margin-left: 60%;  width: 40%; margin-top: 15px;">
                      <!-- 提交 -->
                      <a href="/auth/forgetpassword" class="button is-success is-fullwidth" type="submit">ForgetPassword</a>
                    </p>
                </div>
            </form>
            {% endblock auth_form %}
        </div>

    </div>

</div>
{% endblock main %}